<template>
  <div class="dialog-wrap">
    <el-dialog :visible.sync="dialogVisible_param.show" center>
      <div class="show-title">标识ID：{{ sn_seled }}</div>
      <div v-if="showNoParam">暂无数据</div>
      <bolck v-for="(item, index) in params_arr" :key="index">
        <el-form
          ref="form1"
          :inline="true"
          :model="ruleform"
          :rules="rules"
          class="demo-form-inline form1"
        >
          <el-form-item label="名称" prop="item.param_name">
            <el-input
              v-model="ruleform[index].param_name"
              message="名称"
              :disabled="true"
              placeholder
            ></el-input>
          </el-form-item>
          <el-form-item label="值" prop="item.param_value">
            <el-input
              v-model="ruleform[index].param_value"
              message="值"
              placeholder
            ></el-input>
          </el-form-item>
          <el-form-item
            label="描述"
            prop="item.param_desc"
            show-overflow-tooltip
          >
            <el-input
              v-model="ruleform[index].param_desc"
              message="描述"
              style="width:300px"
              placeholder
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              plain
              @click="modify_fn('form1', index, ruleform[index].param_id)"
              >修改</el-button
            >
          </el-form-item>
        </el-form>
      </bolck>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "jilian",
  props: {
    dialogVisible_param: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
    sn: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      sn_seled: "",
      params_arr: [],
      ruleform: [
        {
          param_name: "",
          param_value: "",
          param_desc: "",
        },
      ],
      rules: {
        param_name: [{ required: false, message: "", trigger: "blur" }],
        param_value: [{ required: false, message: "", trigger: "blur" }],
        param_desc: [{ required: false, message: "", trigger: "blur" }],
      },
      showNoParam:false,
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      postData("/adminweb/host/param/list", {
        sn: this.sn_seled,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            if (!res.datas || !res.datas.params) {
              return;
            }
            this.params_arr = res.datas.params;
            this.ruleform = res.datas.params;
            if (res.datas.params.length == 0) {
              this.showNoParam = true;
            }
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error("error");
        });
    },
    modify_fn(formName, index, param_id) {
      console.log(index, param_id);
      let that = this;
      // that.$refs[formName].validate((valid) => {
      // if (valid) {
      postData("/adminweb/host/param/update", {
        param_id: param_id,
        param_value: that.ruleform[index].param_value,
        param_desc: that.ruleform[index].param_desc,
      })
        .then((res) => {
          if (res.code == 0) {
            that.$message.success("修改成功！");
            that.getList();
           
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
      // } else {
      //   that.$message.error("error");
      //   return false;
      // }
      //  });
    },
  },
  watch: {
    sn: {
      handler(newVal) {
        this.sn_seled = newVal;
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
.btn-group {
  margin: 10px 0;
}
.show-title {
  margin-bottom: 20px;
  font-weight: 600;
}
.dialog-wrap >>> .el-form-item {
  margin-right: 20px;
}
.dialog-wrap >>> .el-button {
  margin-left: 30px;
}
.dialog-wrap >>> .el-dialog {
  width: 70%!important;
   margin-top:30vh!important;
  overflow-y: scroll!important;
}
.dialog-wrap >>> .el-dialog--center .el-dialog__body{
    padding: 20px !important;
    height: 300px!important;
}

</style>
